<template>
  <div class="left-main">
    <div
      v-for="typeItem in typeList"
      :key="typeItem.id"
      class="left-type-item"
      :class="{ 'select-type-item': typeItem.id == curTypeId }"
      @click="selectTypeId(typeItem.id)"
    >
      <div class="type-item-point"></div>
      <div class="type-item-name">{{ typeItem.text }}</div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import VueEvent from '@/helper/event';
  import { HOME_FLOW_START_TYPE } from '@/helper/constant';
  import { GetLoadTree } from '@/api';
  export default defineComponent({
    name: 'FlowStart',
    setup() {
      const state = reactive({
        typeList: [], //流程发起分类
        curTypeId: '', //选中当前发起分类
      });
      const methods = {
        getFlowTypeTree() {
          //获取流程发起分类
          const param = {
            node: 'ROOT',
            onlyItem: true,
            excludes: 'checked',
            strData: JSON.stringify([
              {
                ddCode: 'JE_WF_PROCESS',
                ddName: null,
                rootId: '',
                async: false,
                params: { fast: '1' },
                j_query: { custom: [], order: [], _types: [] },
                nodeInfo: '',
              },
            ]),
          };
          GetLoadTree(param).then((res) => {
            if (res.length > 0) {
              state.typeList = res;
              // state.curTypeId = res[0].id;
              // VueEvent.emit(HOME_FLOW_START_TYPE, state.curTypeId);
            }
          });
        },
        selectTypeId(typeId) {
          //选择流程发起分类
          if (typeId == state.curTypeId) {
            state.curTypeId = '';
          } else {
            state.curTypeId = typeId;
          }
          VueEvent.emit(HOME_FLOW_START_TYPE, state.curTypeId);
        },
      };
      onMounted(() => {
        methods.getFlowTypeTree();
      });
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .left-main {
    width: 210px;
    height: 500px;
    box-sizing: border-box;
    overflow-y: auto;
    border-left: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
    .left-type-item {
      width: 100%;
      height: 32px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .type-item-point {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #3f3f3f;
      }
      .type-item-name {
        font-size: 14px;
        padding-left: 7px;
        color: #3f3f3f;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .left-type-item:hover {
      background: #f9f9f9;
      .type-item-name {
        color: #454545;
      }
    }
    .left-type-item:hover {
      background: #f9f9f9;
      .type-item-point {
        background-color: #454545;
      }
      .type-item-name {
        color: #454545;
      }
    }
    .select-type-item {
      background-color: @je-menu-item-active-bg;
      .type-item-point {
        background-color: @primary-color;
      }
      .type-item-name {
        color: @primary-color;
      }
    }
  }
  .left-main::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
</style>
